<template>
  <div class="demo">
    <div class="demo-title">动态增减表单项</div>
    <div class="demo-content">
      <Form
        ref="formRef"
        name="dynamic_form_item"
        :model="dynamicValidateForm"
        v-bind="formItemLayoutWithOutLabel"
      >
        <Form.Item
          v-for="(domain, index) in dynamicValidateForm.domains"
          :key="domain.key"
          v-bind="index === 0 ? formItemLayout : {}"
          :label="index === 0 ? 'Domains' : ''"
          :name="['domains', index, 'value']"
          :rules="{
            required: true,
            message: 'domain can not be null',
            trigger: 'change',
          }"
        >
          <Input
            v-model:value="domain.value"
            placeholder="please input domain"
            style="width: 60%; margin-right: 8px"
          />
          <MinusCircleOutlined
            v-if="dynamicValidateForm.domains.length > 1"
            class="dynamic-delete-button"
            :disabled="dynamicValidateForm.domains.length === 1"
            @click="removeDomain(domain)"
          />
        </Form.Item>
        <Form.Item v-bind="formItemLayoutWithOutLabel">
          <Button type="dashed" style="width: 60%" @click="addDomain">
            <PlusOutlined />
            Add field
          </Button>
        </Form.Item>
        <Form.Item v-bind="formItemLayoutWithOutLabel">
          <Button type="primary" html-type="submit" @click="submitForm">Submit</Button>
          <Button style="margin-left: 10px" @click="resetForm">Reset</Button>
        </Form.Item>
      </Form>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref } from 'vue';
  import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons-vue';
  import Button from '@sscd/button';
  import Input from '@sscd/input';
  import Form from '@sscd/form';
  import type { FormInstance } from '@sscd/form';
  interface Domain {
    value: string;
    key: number;
  }
  const formRef = ref<FormInstance>();
  const formItemLayout = {
    labelCol: {
      xs: { span: 24 },
      sm: { span: 4 },
    },
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 20 },
    },
  };
  const formItemLayoutWithOutLabel = {
    wrapperCol: {
      xs: { span: 24, offset: 0 },
      sm: { span: 20, offset: 4 },
    },
  };
  const dynamicValidateForm = reactive<{ domains: Domain[] }>({
    domains: [],
  });
  const submitForm = () => {
    formRef.value
      ?.validate()
      .then(() => {
        console.log('values', dynamicValidateForm.domains);
      })
      .catch((error) => {
        console.log('error', error);
      });
  };
  const resetForm = () => {
    formRef.value?.resetFields();
  };
  const removeDomain = (item: Domain) => {
    const index = dynamicValidateForm.domains.indexOf(item);
    if (index !== -1) {
      dynamicValidateForm.domains.splice(index, 1);
    }
  };
  const addDomain = () => {
    dynamicValidateForm.domains.push({
      value: '',
      key: Date.now(),
    });
  };
</script>
<style lang="less" scoped>
  .dynamic-delete-button {
    cursor: pointer;
    position: relative;
    top: 4px;
    font-size: 24px;
    color: #999;
    transition: all 0.3s;
  }
  .dynamic-delete-button:hover {
    color: #777;
  }
  .dynamic-delete-button[disabled] {
    cursor: not-allowed;
    opacity: 0.5;
  }
</style>
